<template>
  <view>
    <view
      class="myNavbarTop myNavbarTop-blue"
      :style="{
        paddingTop: menuButtonInfo.top + 'px',
        background: !isSeat ? 'transparent' : 'rgba(231, 231, 231, 0.8)',
      }"
    >
      <!-- 返回 -->
      <view
        class="myNavbarTop_back"
        v-if="isShowBack && !isShowSearch"
        :class="{ themewhite: theme === 'white' }"
      >
        <view
          style="
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
          @click="goBack"
        >
          <image
            class="b"
            :src="
              theme === 'white'
                ? '/static/images/back.png'
                : '/static/images/back-y.png'
            "
            mode="widthFix"
          ></image>
        </view>
        <view class="line"></view>
        <view
          style="
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
          @click="goHomoe"
        >
          <image
            class="h"
            :src="
              theme === 'white'
                ? '/static/images/home.png'
                : '/static/images/home-y.png'
            "
            mode="widthFix"
          ></image>
        </view>
      </view>
      <!-- 搜索 -->
      <view class="myNavbarTop_back" v-if="isShowSearch" @click="goSearch">
        <image
          class="search"
          src="/static/images/search.png"
          mode="widthFix"
        ></image>
        <view>搜索</view>
      </view>
      <view class="myNavbarTop_title">
        <image
          :src="
            theme === 'white'
              ? '/static/images/logo-w.png'
              : '/static/images/logo.png'
          "
          mode="widthFix"
        ></image>
      </view>
    </view>
    <!-- 占位高度 等于navbar的高度 -->
    <view
      v-if="isSeat"
      class="myNavbarTop_placeholder"
      :style="{ paddingTop: menuButtonInfo.top + 'px' }"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'myNavbarTop',
  props: {
    theme: {
      type: String,
      default: '', // 可选值：blue, white
    },
    // 是否显示占位高度
    isSeat: {
      type: Boolean,
      default: true,
    },
    isShowSearch: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      isShowBack: false,
      menuButtonInfo: uni.getStorageSync('menuButtonInfo'),
    }
  },

  mounted() {
    // 判断是否显示返回按钮
    const pages = getCurrentPages()
    if (pages.length > 1) {
      this.isShowBack = true
    }
  },
  methods: {
    goBack() {
      const pages = getCurrentPages()
      console.log(pages)
      if (pages.length === 2) {
        uni.navigateBack({
          delta: 1,
        })
      } else if (pages.length === 1) {
        uni.redirectTo({
          url: '/pages/home/index',
        })
      } else {
        uni.navigateBack({
          delta: 1,
        })
      }
    },
    goHomoe() {
      uni.switchTab({ url: '/pages/home/index' })
    },
    goSearch() {
      uni.navigateTo({
        url: '/pages/search/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.myNavbarTop-blue {
  background: rgba(231, 231, 231, 0.8);
  --navbar-height: 58rpx;
  --navbar-padding: 20rpx;
  --navbar-border-radius: 60rpx;
  --navbar-border-width: 2rpx;
  --navbar-icon-size: 29rpx;
  --navbar-logo-width: 146rpx;
  --navbar-back-width: 148rpx;
}

.home__header-seat {
  height: calc(150rpx + var(--status-bar-height));
}

.myNavbarTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--navbar-padding);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

.myNavbarTop_title {
  color: var(--main-color);
  width: 100%;
  font-size: 0;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: var(--navbar-logo-width);
    height: auto;
    object-fit: contain;
  }
}

.myNavbarTop_back {
  position: absolute;
  height: var(--navbar-height);
  width: var(--navbar-back-width);
  border-radius: var(--navbar-border-radius);
  border: var(--navbar-border-width) solid var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  font-size: 0;
  font-weight: 500;
  transition: opacity 0.3s ease;

  .search {
    width: 24rpx;
    height: 24rpx;
    margin-right: 12rpx;
  }

  view {
    color: #545454;
    font-size: 24rpx;
  }

  &:active {
    opacity: 0.7;
  }

  .line {
    width: var(--navbar-border-width);
    height: 35rpx;
    background: var(--main-color);
  }

  .h,
  .b {
    width: 36rpx;
    height: var(--navbar-icon-size);
    object-fit: contain;
  }

  .b {
    width: 20rpx;
  }
}

.themewhite {
  background: transparent;
  border: 2rpx solid #fff;

  .line {
    background: #fff;
  }
}

.myNavbarTop_placeholder {
  height: 58rpx;
  padding: 20rpx;
}
</style>
